<template>
  <div>
    <headerBox></headerBox>
    <div class="grid-container">
      <!-- 左边容器 -->
      <div class="grid-left">
        <div class="grid-item-left " v-if="!showDetails">
          <div
            class="grid-item"
            v-for="(item, index) in modelObjectList"
            :key="item.cameraId"
          >
            <videoBox :videoIndex="index" :modelObject="item"></videoBox>
          </div>
        </div>
        <video-details
          class="grid-item-left-1"
          @closeDetails="closeDetails"
          :alarmList="abnormal_info"
          v-if="showDetails"
        ></video-details>
      </div>

      <!-- 右边容器 -->
      <div class="grid-item-right">
        <div class="grid-item">
          <tableBox :alarmList="abnormal_info"></tableBox>
        </div>
        <div class="grid-item">
          <solicatBox :helpList="help_info"></solicatBox>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerBox from '../components/header-box';
import videoBox from '../components/video';
import tableBox from '../components/table';
import solicatBox from '../components/solicat';
import videoDetails from '../components/details.vue';
import { perceptionAlarm, assistInfo, videoUrl } from '../service/user';
export default {
  components: {
    headerBox,
    videoBox,
    tableBox,
    solicatBox,
    videoDetails
  },
  data() {
    return {
      test: [],
      showDetails: false,
      modelObjectList: [{}, {}, {}, {}],
      abnormal_info: [],
      help_info: [],
      timer: '',
      currentIndex: false,
      timeNum: 20000, // 切换视频的间隔,
      page: 0,
      current: 0
    };
  },
  mounted() {
    this.getAlarm();
    this.getAssist();
    videoUrl().then(res => {
      this.test = res.data.result;
      this.page = Math.ceil(this.modelObjectList.length / 2);
      this.modelObjectList = this.test.slice(0, 4);
      this.timer = setInterval(() => {
        if (this.current >= this.page - 1) {
          this.current = 0;
        } else {
          this.current++;
        }
        this.modelObjectList = this.test.slice(
          this.current * 4,
          (this.current + 1) * 4
        );
      }, 10000);
    });
  },
  methods: {
    closeDetails() {
      this.showDetails = false;
    },
    getAlarm() {
      perceptionAlarm().then(res => {
        console.log(res.data.result.abnormal_info);
        this.abnormal_info = res.data.result.abnormal_info;
        this.showDetails = true;
      });
    },
    getAssist() {
      assistInfo().then(res => {
        console.log(res.data.result.abnormal_info);
        this.help_info = res.data.result.help_info;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  height: calc(100vh - 80px);
  margin-top: 10px;
  padding: 0 10px;
  .grid-item-left {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
  .grid-item-left-1 {
    display: grid;
    grid-template-columns: 1fr 1fr 3fr;
    grid-template-rows: 4fr 206px 44px;
    grid-column-gap: 10px;
    height: calc(100vh - 80px);
    grid-row-gap: 10px;
    grid-template-areas:
      'aa aa aa '
      'bb cc dd '
      'ee ee ee';
  }
  .grid-item-right {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
  .grid-item {
    font-size: 20px;
    background: #121626;
  }
}
</style>
